<template>
	<div class="h-full flex flex-col">
		<!-- 列表 -->
		<a-card class="mt-[10px]">
			<template #extra>
				<a-button class="border-none" icon="rollback" @click="rollback"
					>{{ $t('app.setting.themecolor.rr99') }}
				</a-button>
			</template>

			<div class="Temi">
				<div>
					<span style="margin-right: 10px">{{ $t('Please') }}:</span>
					<a-range-picker
						@change="onChange"
						style="margin-right: 10px"
					/>
					<a-button type="primary" icon="search" @click="Temi()">
                        {{ $t('Search') }}
					</a-button>
                    
				</div>
				<div>
					<a-button type="primary" @click="exports()">
						{{ $t('derive') }}
					</a-button>
				</div>
			</div>
			<a-table
				ref="table"
				size="middle"
				class="h-full overflow-x-auto"
				:dataSource="listData"
				:pagination="false"
				:loading="listLoading"
				:customRow="rowClick"
				@change="tableChange"
				:rowKey="(record) => record.Id"
			>
				<!--业务领域----------------------->
				<a-table-column
					key="DpiaBusinessType"
					width="140px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(0)
						}
					"
				>
					<span slot="title" class="min-w-90p">业务领域</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="ç"
							:single-search="false"
							:filter-data="caogao"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
							@searchFilter="searchQueryFilter"
						/>
					</span>
					<template slot-scope="record">
						{{ record.DpiaBusinessType }}
					</template>
				</a-table-column>
				<!-- DPIA ID -->
				<a-table-column
					key="DpiaId"
					data-index="DpiaId"
					width="180px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(1)
						}
					"
				>
					<span slot="title" class="min-w-90p">DPIA ID </span>

					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect1"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{ record.DpiaId }}</span>
					</template>
				</a-table-column>
				<!-- DPIA名称 -->
				<a-table-column
					key="DpiaName"
					data-index="DpiaName"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(2)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required11156611033')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect2"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaName
						}}</span>
					</template>
				</a-table-column>
				<!-- 数据控制者  -->
				<a-table-column
					key="DpiaDataController"
					data-index="DpiaDataController"
					width="120px"
					@filterDropdownVisibleChange="(e) => (this.setValusKey = 3)"
				>
					<span slot="title" class="min-w-90p"
						>{{ $t('user.login.remember-me') }}
					</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect3"
							:filter-data="[]"
							@searchCommit="searchQuery"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaDataController
						}}</span>
					</template>
				</a-table-column>
				<!-- 相关部门 -->
				<a-table-column
					key="DpiaDepartment"
					data-index="DpiaDepartment"
					width="120px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(4)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required11156611022')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect4"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaDepartment
						}}</span>
					</template>
				</a-table-column>
				<!-- 联系人 -->
				<a-table-column
					key="DpiaCreateUser"
					data-index="DpiaCreateUser"
					width="110px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(5)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required1115661102311')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect5"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>

					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaCreateUser
						}}</span>
					</template>
				</a-table-column>
				<!-- 关联RPA名称 -->
				<a-table-column
					key="RpaId"
					data-index="RpaId"
					width="120px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(6)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required11156611024')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect6"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<rpaDetail :rpaDetailId="record.RpaId" />
					</template>
				</a-table-column>
				<!-- DCO -->
				<a-table-column
					key="DpiaDco"
					width="120px"
					data-index="DpiaDco"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(7)
						}
					"
				>
					<span slot="title" class="min-w-90p">DCO</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect7"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{ record.DpiaDco }}</span>
					</template>
				</a-table-column>
				<!-- 完成时间------------------ -->
				<a-table-column
					key="DpiaUpdateDate"
					data-index="DpiaUpdateDate"
					width="120px"
				>
					<span slot="title" class="min-w-90p">
						<!-- {{ $t('user.verification-code.required1115661311111') }} -->
						完成时间
						<img
							src="@/assets/homePage/op.png"
							alt=""
							style="
								width: 16px;
								display: inline-block;
								cursor: pointer;
							"
							@click="DpiaUpdate()"
						/>
					</span>

					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaUpdateDate
						}}</span>
					</template>
				</a-table-column>
				<!-- 操作 -->
				<a-table-column
					key="action"
					:title="$t('menu.exception.not-find')"
					width="80px"
					fixed="right"
				>
					<template slot-scope="record">
						<span>
							<a-dropdown>
								<a-button type="link">
									<a-icon type="more" />
								</a-button>
								<template #overlay>
									<a-menu>
										<!-- 下载 -->
										<a-menu-item
											v-if="
												record.Reports === 1 &&
												record.RpaIfCompletedPIA ===
													0 &&
												record.RpaNoPIOrImportantInvolved ==
													0 &&
												(record.DpiaChangeDcoId !=
													$store.state.user.info
														.YtId ||
													record.DpiaChangeDcoId ==
														'')
											"
										>
											<a-button
												type="link"
												@click="xiazai(record)"
												>{{
													$t(
														'user.verification-code.required1115661105715'
													)
												}}</a-button
											>
										</a-menu-item>
										<!-- 整体评估 -->
										<a-menu-item
											v-if="
												(record.DpiaStatus === 3 &&
													record.Role.DCO == 1 &&
													(record.DpiaChangeDcoId !=
														$store.state.user.info
															.YtId ||
														record.DpiaChangeDcoId ==
															'')) ||
												record.Reports === 1
											"
											@click="
												record.DpiaStatus === 3
													? overall(
															record,
															'allReview'
													  )
													: overall(record, 'see')
											"
										>
											<a-button type="link">{{
												record.DpiaStatus === 3
													? $t(
															'user.verification-code.required1115661105720'
													  )
													: $t(
															'user.verification-code.required1115661105718'
													  )
											}}</a-button>
										</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</span>
					</template>
				</a-table-column>
			</a-table>
			<!-- 分页 -->
			<a-pagination
				size="small"
				v-model="pagination.current"
				:total="pagination.total"
				hideOnSinglePage
				:pageSize.sync="pagination.pageSize"
				@change="getList()"
			/>
		</a-card>
	</div>
</template>

<script>
import form from '@/locales/lang/zh-CN/form'
import { getUserInfo } from '@/api/index'
import {
	dpiaGroup,
	dpiaLists,
	statisticalDatalist,
	DpiaList,
	downexport,
} from '@/api/dpia/form'
import { taskSelect } from '@/api/risk/form'
import axios from 'axios'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import qs from 'qs'
import jwt from 'jwt-simple'
import moment from 'moment'
import tableSelect from '@/components/tableSelect/tableSelect.vue'
export default {
	name: 'myPortal',
	components: { tableSelect },
	data() {
		return {
			listData: [],
			cardList: [],
			queryForm: {
				QueryStartTime: '', //开始
				QueryEndTime: '', // 结束
				DpiaUpdateTimeOrder: "DESC",
			},
			pagination: {
				current: 1, //当前页
				pageSize: 10, //每页条数
				total: 0, //总条数
				showQuickJumper: true,
				hideOnSinglePage: true,
			},
			listData: [],
			caogao: [
				{
					text: 'CU',
					value: 'CU',
				},
				{
					text: 'HR',
					value: 'HR',
				},
				{
					text: 'TH',
					value: 'TH',
				},
				{
					text: 'VH',
					value: 'VH',
				},
			],
			// 暂时存用户数据
			userdata: {},
			listLoading: true,
			//搜索筛选合并
			setValusKey: '',
			filterData: [],
			kvMap: [
				'DpiaBusinessType',
				'DpiaId',
				'DpiaName',
				'',
				'DpiaDepartment',
				'DpiaCreateUser',
				'RpaId',
				'DpiaDco',
				'DpiaCreatetime',
				'DpiaStatus',
				'DpiaReferenceId',
			],
			okyMap: [
				'DpiaBusinessType',
				'DpiaIdStr',
				'DpiaNameStr',
				'DpiaDataControllerStr',
				'',
				'',
				'RpaIdStr',
				'',
				'',
				'DpiaStatusStr',
				'DpiaReferenceId',
			],
			DpiaUpdateTimeOrder: 'DESC',
		}
	},

	created() {
		this.init()
	},
	methods: {
		// 查询Filter逻辑
		async setValus(typeId) {
			// console.log('typeId',typeId);
			this.listLoading = true
			try {
				if (typeId == 16) {
					const { data } = await taskSelect({
						Types: 6,
						types: 3,
					})
					// 调用查询列表

					for (let j = 0; j < data.length; j++) {
						if (typeId === 5) {
							switch (data[j].value) {
								case 1:
									data[j].text = this.$t(
										'user.verification-code.required111566133'
									)
									break
								case 2:
									data[j].text = this.$t(
										'user.verification-code.required1115661444444'
									)
									break
								case 3:
									data[j].text = this.$t(
										'user.verification-code.required111566145'
									)
									break
								case 4:
									data[j].text = this.$t(
										'user.verification-code.required111566146'
									)
									break
								case 5:
									data[j].text = `${this.$t(
										'user.verification-code.required111566110577371442281431222335566555555'
									)}/${this.$t(
										'user.verification-code.required1115661222222'
									)}`
									break
								default:
									break
							}
						} else {
							data[j].text = data[j].value
						}
					}
					this.setValusKey = typeId
					this.filterData = data
				} else if (typeId == 17) {
					const { data } = await taskSelect({
						Types: 7,
						types: 3,
					})
					// 调用查询列表

					for (let j = 0; j < data.length; j++) {
						if (typeId === 5) {
							switch (data[j].value) {
								case 1:
									data[j].text = this.$t(
										'user.verification-code.required111566133'
									)
									break
								case 2:
									data[j].text = this.$t(
										'user.verification-code.required1115661444444'
									)
									break
								case 3:
									data[j].text = this.$t(
										'user.verification-code.required111566145'
									)
									break
								case 4:
									data[j].text = this.$t(
										'user.verification-code.required111566146'
									)
									break
								case 5:
									data[j].text = `${this.$t(
										'user.verification-code.required111566110577371442281431222335566555555'
									)}/${this.$t(
										'user.verification-code.required1115661222222'
									)}`
									break
								default:
									break
							}
						} else {
							data[j].text = data[j].value
						}
					}
					this.setValusKey = typeId
					this.filterData = data
				} else if (typeId == 0) {
					this.setValusKey = typeId
				} else {
					// 调用查询列表
					const { data } = await dpiaGroup({ Condition: typeId })
					// console.log('data0',data);
					// 赋值类型，用于筛选、搜索的直接调用
					// 为了使中文状态下还是中文
					for (let j = 0; j < data.length; j++) {
						if (typeId === 9) {
							switch (data[j].value) {
								case 1:
									data[j].text = this.$t(
										'user.verification-code.required111566133'
									)
									break
								case 2:
									data[j].text = this.$t(
										'user.verification-code.required1115661444444'
									)
									break
								case 3:
									data[j].text = this.$t(
										'user.verification-code.required111566145'
									)
									break
								case 4:
									data[j].text = this.$t(
										'user.verification-code.required111566146'
									)
									break
								case 5:
									data[j].text = `${this.$t(
										'user.verification-code.required11156611057737144228143122233556655'
									)}`
									break
								default:
									break
							}
						}
					}
					this.setValusKey = typeId
					// if (typeId === 9) {
					//   for (let i = 0; i < data.length; i++) {
					//     data[i].text = data[i].textEn
					//   }
					// }
					// 决定中文状态下是英文
					// 赋值筛选的列表，直接赋值
					this.filterData = data
				}
			} catch (error) {
				// 报错信2
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},
		/**
		 * 清空查询数据，并且执行查询
		 * @returns {Promise<void>}
		 */
		async tableCleanJobs(type) {
			console.log(type)
			this.pagination.page = 1
			if (type === 'part') {
				this.queryForm[this.kvMap[this.setValusKey]] = undefined
				this.queryForm[this.okyMap[this.setValusKey]] = undefined
			} else {
				this.queryForm = {}
				for (let i = 1; i <= 8; i++) {
					let dom = this.$refs[`tableselect${i}`]
					if (dom) {
						dom.inputValue = ''
						dom.inputCheckValue = []
					}
				}
			}
			this.inputValue = ''
			await this.getList()
		},

		/**
		 * 列表搜索查询
		 * @param e 搜索的值
		 * @returns {Promise<void>}
		 */
		async searchQuery(e) {
			console.log(
				'this.kvMap[this.setValusKey]',
				this.kvMap[this.setValusKey]
			)
			this.queryForm[this.kvMap[this.setValusKey]] = undefined
			this.queryForm = {
				...this.queryForm,
				[this.okyMap[this.setValusKey]]: e,
			}
			await this.getList('filter')
			this.queryForm = {}
		},

		/**
		 * 列表筛选查询
		 * @param e 筛选的值
		 * @returns {Promise<void>}
		 */
		async searchQueryFilter(e) {
			this.queryForm[this.okyMap[this.setValusKey]] = undefined
			console.log('this.okyMap', this.setValusKey)
			this.queryForm = {
				...this.queryForm,
				[this.kvMap[this.setValusKey]]:
					this.setValusKey === 2 ? e.replaceAll('/', '#@%$') : e,
			}
			await this.getList('filter')
		},

		async shlist(type) {
			// this.DpiaStatus = type
			this.listLoading = true
			if (type == 'all') {
				this.tableCleanJobs(type)
				setTimeout(() => {
					this.listLoading = false
				}, 600)
			} else {
				this.queryForm = {
					...this.queryForm,
					DpiaStatus: type,
				}
				const { data } = await dpiaLists({
					...{ page: 1, pageSize: 10 },
					...this.queryForm,
				})

				console.log('async getList1', this.queryForm)
				// 解构赋值
				const { Page, PageSize, Total, Lists } = data

				// 给table赋值
				this.listData = Lists || []

				// 给分页数据赋值
				this.pagination = {
					current: Page,
					pageSize: PageSize,
					total: Total,
				}
				// this.listLoading = false
				setTimeout(() => {
					this.listLoading = false
				}, 600)
			}
		},

		async init() {
			if (localStorage.getItem('lang') == '"zh-CN"') {
				this.itLang = true
			} else if (localStorage.getItem('lang') == '"zh-EN"') {
				this.itLang = false
			}
			this.getList()
		},
		async getList(state) {
			this.listData = []
			this.listLoading = true
			const { current, pageSize } = this.pagination
			try {
				if (state == 'filter') {
					// 调用查询列表
					const { data } = await statisticalDatalist({
						...{ page: 1, pageSize: 10 },
						QuerySource: 'DashBoard',
						...this.queryForm,
					})

					console.log('async getList1', this.queryForm)
					console.log(data)
					// 解构赋值
					const { Page, PageSize, Total, Lists } = data

					// 给table赋值
					this.listData = Lists || []

					// 给分页数据赋值
					this.pagination = {
						current: Page,
						pageSize: PageSize,
						total: Total,
					}
				} else {
					// 调用查询列表
					const { data } = await dpiaLists({
						...{ page: current, pageSize },
						QuerySource: 'DashBoard',
						...this.queryForm,
					})
					// 解构赋值
					const { Page, PageSize, Total, Lists } = data

					console.log('async getList2', this.queryForm)
					// 给table赋值
					this.listData = Lists || []
					// 给分页数据赋值
					this.pagination = {
						current: Page,
						pageSize: PageSize,
						total: Total,
					}
				}
			} catch (error) {
				// 报错信息
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},
		rollback() {
			this.$router.push({ path: '/DashBoard' })
		},
		//报告列表
		async xiazai(record) {
			const { data } = await DpiaList({ Id: record.Id })
			const urls = data.Lists.map((item) => item.DpiaReportAddress)
			// console.log(urls);
			if (this.lang === 'zh-EN') {
				const enUrls = urls.filter((url) => url.includes('en'))
				sessionStorage.setItem('report', enUrls)
				this.$router.push({
					path: '/DashBoard/dpia/report',
				})
			} else {
				const cnUrls = urls.filter((url) => !url.includes('en'))
				sessionStorage.setItem('report', cnUrls)
				this.$router.push({
					path: '/DashBoard/dpia/report',
				})
			}
		},
		// 整体评估
		overall(record, state) {
			this.$router.push({
				path: '/DashBoard/dpia/overall',
				query: { id: record.Id, state: state, isLable: this.isLable },
			})
		},
		// 导出
		async exports() {
			// const { data } = await downexport({ lang:1 })
			let id = ''
			try {
				const data = await axios({
					url: `${process.env.VUE_APP_BASE_API}/v1/dpia/dashboard/export`,
					method: 'post',
					params: {},
					data: {
						...this.queryForm,
					},
					headers: {
						token: storage.get(ACCESS_TOKEN),
						tokens: storage.get('bmwToken') || '',
						YtAuth: jwt.encode({ bmw: 1 }, 'jwt'),
					},
					responseType: 'arraybuffer',
				})
				console.log(data)
				if (data.status === 200) {
					const url = window.URL.createObjectURL(
						new Blob([data.data], {
							type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
						})
					)
					const link = document.createElement('a')
					link.style.display = 'none'
					link.href = url
					link.setAttribute(
						'download',
						`DPIA统计${moment().format('L')}.xls`
					)
					document.body.appendChild(link)
					link.click()
					document.body.removeChild(link)
				} else {
					this.$message.error(
						this.$t(
							'user.verification-code.required111566110577327'
						)
					)
				}
			} catch (error) {
				this.$message.error(error)
			}
		},
		async Temi() {
			this.getList()
		},
		onChange(date, dateString) {
			this.queryForm.QueryStartTime = dateString[0] //开始
			this.queryForm.QueryEndTime = dateString[1] // 结束
		},
		async DpiaUpdate() {
			if (this.DpiaUpdateTimeOrder == 'DESC') {
				//升序
                this.DpiaUpdateTimeOrder =  'ASC'
				this.queryForm.DpiaUpdateTimeOrder = 'ASC'
				this.getList()
			} else {
				// 降序
                this.DpiaUpdateTimeOrder =  'DESC'
				this.queryForm.DpiaUpdateTimeOrder = 'DESC'
				this.getList()
			}
		},
	},
}
</script>
<style lang="less" scoped>
/deep/ .ant-table-thead {
	background: #f4f7ff;
	font-weight: 700;
}

.ant-pagination {
	float: right;
}

.Title {
	font-size: 36px;
	font-weight: 500;
	line-height: 42px;
	letter-spacing: 0em;
	text-align: left;
	margin-bottom: 10px;
}

.Title1 {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: left;
	margin-bottom: 10px;
	margin-left: 45px;
}

.Title2 {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: left;
	margin-bottom: 10px;
	margin-left: 55px;
}

.card {
	display: flex;
	flex-direction: row;
	width: 60%;
	border: 1px solid #ccc;
	border-radius: 4px;
	height: 310px;
	margin: 15px 0;
}

.card_le {
	width: 18px;
	background: rgba(164, 201, 234, 1);
}

.card_ri {
	width: 100%;
	background: #fff;
}

.card_ri .Dpia {
	height: 44px;
	line-height: 44px;
	border-bottom: 1px solid #ccc;
	width: 100%;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0em;
	text-align: left;
	padding-left: 15px;
}

.TotaNua {
	display: flex;
	width: 100%;
	justify-content: center;
	font-size: 44px;
	color: #1890ff;
}

.Tota {
	display: flex;
	width: 100%;
	justify-content: center;
	font-size: 16px;
}

.Dra {
	display: flex;
	justify-content: space-around;
	flex-wrap: nowrap;
	margin-top: 33px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ccc;
}

.Foos {
	font-size: 18px;
	cursor: pointer;
}

.Pa {
	height: 5px;
	width: 90px;
	background: #ccc;
	position: absolute;
	top: 0px;
	left: 50%;
	cursor: pointer;
}

.manipulate {
	position: absolute;
	right: 0;
	margin-top: -24px;
	background: rgba(255, 255, 255, 0.9);
	height: 46px;
	line-height: 49px;
}

.icon {
	font-size: 18px;
	margin: 0 40px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 50%;
}

.icon:hover {
	background-color: #757575;
	border-radius: 50%;
	text-align: center;
	width: 30px;
	height: 30px;
	line-height: 30px;
}

.timeline-item-green {
	color: green;
}

.timeline-item-red {
	color: red;
}

.timeline-item-gray {
	color: gray;
}
.Temi {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}
</style>
